<template>
  <div class="layout">
    <div class="header"></div>
    <div class="container">
      <div class="map-container">
        <div class="map-container-in">
          <div class="map-title">
            <div class="title">
              <span>轨迹图</span>
            </div>
            <div class="select">
              <!-- <SelectComponent /> -->
            </div>
          </div>
          <div id="map"></div>
        </div>
      </div>
      <div class="table-container">
        <div class="info base-info">
          <div class="info-inner">
            <div class="table-name">
              <span>基本信息</span>
            </div>
            <BaseInfoTable />
          </div>
        </div>

        <div class="space"></div>

        <div class="info position-info">
          <div class="info-inner">
            <div class="table-name">
              <span>位置信息</span>
            </div>
            <PositionInfoTable />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { ref, onMounted } from "vue";
import BaseInfoTable from "@/components/BaseInfoTable.vue";
import PositionInfoTable from "@/components/PositionInfoTable.vue";
import { setLocation, fetchBasicInfoData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

mapStore.basicInfoTableCurrentPage;
mapStore.basicInfoTablePageSize;

onMounted(() => {
  const map = L.map("map").setView([39.898457, 116.391844], 13);

  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    minZoom: 7,
    maxZoom: 16,
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  setLocation(map);
  fetchBasicInfoData(mapStore.basicInfoTableCurrentPage, mapStore.basicInfoTablePageSize);

  setInterval(function() {
    setLocation(map);
    mapStore.basicInfoTableCurrentPage = 1;
    fetchBasicInfoData(
      mapStore.basicInfoTableCurrentPage,
      mapStore.basicInfoTablePageSize
    );
  }, 30 * 1000);
});
</script>

<style scoped>
.layout {
  height: 100% !important;
  width: 100% !important;
}

.header {
  height: 90px;
  /* background:url("./assets/head_bg.png") no-repeat scroll center 0; */
}

.container {
  display: flex;
  height: calc(100vh - 90px);
}

.map-container {
  border: 2px solid #0b4175;
  border-radius: 10px;
  height: 100%;
  flex: 1;
  padding: 1px;
  margin-left: 5px;
  min-width: 400px;
}

.map-container-in {
  border-radius: 10px;
  background: #0b4175;
  height: 100%;
}

.map-title {
  height: 50px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  color: #fff;
  font-weight: bold;
}

.title span {
  display: block;
  height: 20px;
  line-height: 20px;
  border-left: 3px solid #409eff;
  padding-left: 5px;
  font-size: 14px;
}

.select {
  color: #fff;
}

#map {
  height: calc(100% - 50px);
  /* border-radius: 10px; */
}

.table-container {
  width: 700px;
  margin-left: 10px;
  padding-right: 5px;
  height: 100%;
  overflow: auto;
}

.info {
  border: 2px solid #0b4175;
  border-radius: 10px;
  height: 260px;
  padding: 1px;
}

.info-inner {
  border-radius: 10px;
  background: rgba(11, 65, 117, 0.9);
  height: 100%;
}
.table-name {
  display: block;
  padding-top: 8px;
  height: 40px;
  border-bottom: 1px solid #0c5fac;
}
.table-name span {
  display: block;
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
  border-left: 3px solid #409eff;
  padding-left: 5px;
  font-size: 14px;
}
.base-info {
  height: 300px;
  color: #fff;
  overflow: auto;
}

.position-info {
  height: 350px;
  color: #fff;
}
</style>
